<template>
  <div class="main">
    <div class="main__title box-border">
      <div class="text-3xl  font-bold ">检测结果概述</div>
      <div class="text-sm">检测地点：上海音乐厅 拍照时间：2021-11-18 10:00:00</div>
    </div>
    <div class="main__content ">
      <slot></slot>

    </div>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
@mixin block($block) {
  .#{$block} {
    @content;
  }
}

@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@include block(main) {
  @apply w-screen h-screen p-4;

  @include element(title) {
    width: 100%;
    height: 60px;
  }

  @include element(content) {
    width: 100%;
    height: 850px;
    border: 3px solid black;
  }
}
</style>
